<template>
  <div>
    <div class="search">
      <a-row>
        <a-col :span="8">
          <label>
            <span class="field">分类名称: </span>
            <a-input v-model="params.categoryName" placeholder="请输入名称"></a-input>
          </label>
        </a-col>

        <a-col :span="8">
          <div>
            <a-button type="primary" icon="search" @click="handlerSearch">搜索</a-button>
            <router-link to="/category/add">
              <a-button type="primary" icon="plus">添加</a-button>
            </router-link>
          </div>
        </a-col>
      </a-row>
      <a-divider dashed/>
    </div>
    <a-table rowKey="id" :columns="columns" :loading="loading" :dataSource="data"
             @change="handleChange"
             :pagination="pagination">
      <span slot="action" slot-scope="text,record">
        <router-link :to="{path:'/category/edit/' + record.id}">
          <a-tooltip placement="topLeft" title="编辑">
            <a-icon type="edit"/>
          </a-tooltip>
        </router-link>
        <a href="javascript:void (0);">
          <a-popconfirm title="确定要删除吗？" placement="bottom" @confirm="handlerDelete(record)">
            <a-icon slot="icon" type="question-circle" style="color: red"/>
            <a-tooltip placement="topLeft" title="删除">
              <a-icon type="delete" :style="{color: 'red'}"/>
            </a-tooltip>
          </a-popconfirm>
        </a>
      </span>
    </a-table>
  </div>
</template>

<script>
import {deleteById, queryForPage} from "@/network/category";
import {Order, PageQuery} from "@/utils/page-query";
import {pageSizeOptions, defaultPageSize, showTotal} from "@/utils/pagination";

export default {
  name: "CategoryInfo",
  created() {
    this.loadingData(new PageQuery());
  },
  data() {
    return {
      data: [],
      loading: {spinning: false, tip: "加载中..."},
      pagination: {
        total: 0,
        defaultPageSize,
        showTotal,
        pageSizeOptions,
        showQuickJumper: true,
        showSizeChanger: true
      },
      params: {
        categoryName: null
      }
    }
  },
  computed: {
    columns() {
      return [{
        title: '分类名称',
        align: 'center',
        dataIndex: 'categoryName',
        width: '30%'
      }, {
        title: '文章数',
        align: 'center',
        sorter: true,
        dataIndex: 'articleNum',
        width: '20%'
      }, {
        title: '操作',
        scopedSlots: {
          customRender: "action"
        },
        width: "20%"
      }
      ];
    }
  },
  methods: {
    handlerDelete(record) {
      deleteById(record.id).then(response => {
        this.$message.success(response.message);
      }).finally(() => {
        this.loadingData(new PageQuery(this.params, this.pagination.current, this.pagination.pageSize));
      });
    },
    loadingData(queryPage) {
      this.loading.spinning = true;
      queryForPage(queryPage).then(response => {
        this.data = response.data.data;
        this.pagination.total = response.data.totalRow;
      }).finally(() => this.loading.spinning = false);
    },
    handlerSearch() {
      this.loadingData(new PageQuery(this.params));
    },
    handleChange(pagination, filters, sorter) {
      const pager = {...this.pagination};
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
      let orders = sorter.order ? [new Order(sorter.columnKey, sorter.order === "descend")] : [];
      this.loadingData(new PageQuery(this.params, pagination.current, pagination.pageSize, orders));
    }
  }
}
</script>
